<template>
  <div style="width: 80%; border: 1px solid #ccc;">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :default-config="toolbarConfig" :mode="mode" />
    <Editor v-model="valueHtml" style="height: 500px; overflow-y: hidden;" :default-config="editorConfig" :mode="mode" @onCreated="handleCreated" @onChange="change" />
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, ref, watch, shallowRef } from 'vue';

import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { useAuthStore } from '@/stores/auth';

import { fileToBase64 } from '@/utils/file';
import { uploadImage } from '@/api/upload';
import config from '@/config';
import '@wangeditor/editor/dist/css/style.css'; // 引入 css

defineOptions({
  name: 'BaseEditor'
});
const authStore = useAuthStore();

const props = defineProps({
  html: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:html']);
const mode = ref('default');

// 编辑器实例，必须用 shallowRef
const editorRef = ref(shallowRef());

// 内容 HTML
const valueHtml = ref('');

const change = () => {
  emit('update:html', valueHtml.value);
};

const toolbarConfig = ref({
  excludeKeys: ['fullScreen', 'group-video']
});

const editorConfig = ref({
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      // 服务器地址
      proxyType: 'kgj',
      // form-data fieldName ，默认值 'wangeditor-uploaded-image'
      fieldName: 'base64_image',
      server: `${config.VITE_APP_BASE_URL}/api/invoice/upload/image`,
      /*
        这些为接口支持跨域且支持File类型上传时的配置，支持后再做调整
      // 单个文件的最大体积限制，默认为 2M
        maxFileSize: 3 * 1024 * 1024, // 3M
        server: serverMap[props.proxyType],
       */

      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,

      // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],

      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      meta: {},

      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,

      // 自定义增加 http  header
      headers: {
        Authorization: `Bearer ${authStore.token}`,
        'Access-Control-Allow-Origin': '*'
      },
      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,

      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒
      // customInsert: function (res, insertFn) {
      //   // res 即服务端的返回结果
      //   // 从 res 中找到 url alt href ，然后插入图片
      //   insertFn(res.url, '', '');
      // },
      /** 自定义上传，此处适配考古加CRM地址上传 */
      async customUpload(file, insertFn) {
        const baseStr = await fileToBase64(file);
        console.log(baseStr?.split('base64,')[1], '95');

        const imgStr = baseStr?.split('base64,')[1];

        const res = await uploadImage({
          base64_image: imgStr
        }).catch((e) => console.log('e', e));
        const { url } = res?.data || {};
        console.log(url, res);

        insertFn(url, 'upload-img', url);
      }
    },
    uploadVideo: {
      // 服务器地址
      server: '/api/upload',
      // form-data fieldName ，默认值 'wangeditor-uploaded-video'
      fieldName: 'file',

      // 单个文件的最大体积限制，默认为 10M
      maxFileSize: 5 * 1024 * 1024, // 5M

      // 最多可上传几个文件，默认为 5
      maxNumberOfFiles: 3,

      // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['video/*'],

      // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      meta: {
        token: 'xxx',
        otherKey: 'yyy'
      },

      // 将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,

      // 自定义增加 http  header
      headers: {
        Accept: 'text/x-json',
        otherKey: 'xxx'
      },

      // 跨域是否传递 cookie ，默认为 false
      withCredentials: true,

      // 超时时间，默认为 30 秒
      timeout: 15 * 1000 // 15 秒

      // 视频不支持 base64 格式插入
    }
  }
});

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  editor?.destroy();
});

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

watch(
  () => props.html,
  (newVal) => {
    valueHtml.value = newVal;
  }
);
</script>
